import React, {FC, useEffect, useRef, useState} from 'react';
import {
  View,
  Image,
  StyleSheet,
  ScrollView,
  RefreshControl,
} from 'react-native';
import icon_mine_bg from '../../assets/icon_mine_bg.png';
import UserInfo from './UserInfo';
import TabLayout from './TabLayout';
import Title from './Title';
import MineStore from '../../stores/MineStore';
import {observer} from 'mobx-react';
import List from './List';
import SideMenu, {SideMenuRef} from './SideMenu';
type PropsType = {};
const Mine: FC<PropsType> = observer(() => {
  const ref = useRef<SideMenuRef>(null);
  useEffect(() => {
    requestAll();
  }, []);
  const [bgImgHeight, setBgImgHeight] = useState<number>(360);
  const [refreshing, setRefreshing] = useState<boolean>(false);
  const requestAll = () => {
    setRefreshing(true);
    MineStore.requestAccountInfo();
    MineStore.requestCollectionList();
    MineStore.requestNoteList();
    MineStore.requestFavoriteList();
    setRefreshing(false);
  };
  return (
    <View style={styles.root}>
      <Image
        style={StyleSheet.compose({height: bgImgHeight + 96}, styles.bg)}
        source={icon_mine_bg}
      />
      <Title onSettingClick={() => ref.current?.show()} />
      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
        refreshControl={<RefreshControl refreshing={refreshing} />}>
        <UserInfo callback={height => setBgImgHeight(height)} />
        <TabLayout />
        <List />
      </ScrollView>
      <SideMenu ref={ref} />
    </View>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
    alignItems: 'center',
  },
  bg: {
    width: '100%',
    position: 'absolute',
    top: 0,
  },
  scrollView: {
    width: '100%',
    flex: 1,
  },
});
export default Mine;
